<template>
    <div v-if="showFrame">
        <template v-for="frame in getFramePages" :key="frame.path">
            <frame-content
                v-if="hasRenderFrame(frame.name)"
                v-show="showIframe(frame)"
                :frame-src="frame.meta.frameSrc"
            />
        </template>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, unref } from 'vue';

import FrameContent from '../components/FrameContent.vue';
import { useFrameKeepAlive } from './useFrameKeepAlive';

export default defineComponent({
    name: 'FrameLayout',
    components: { FrameContent },
    setup() {
        const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();

        const showFrame = computed(() => unref(getFramePages).length > 0);

        return { getFramePages, hasRenderFrame, showIframe, showFrame };
    },
});
</script>
